<template>
  <a-modal
    class="cangku"
    :width="1000"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :visible="visible"
    title="选择仓库库位">
    <a-row :gutter="24">
      <a-col :span="6">
        <a-card class="cangku-list" title="仓库">
          <a-input-search slot="extra" v-model="searchValue" @pressEnter="handlePressEnter" v-show="showSeachInput" placeholder="请输入仓库名"
          >
            <!--                     <a-icon slot="suffix" style="font-size:18px" type="search" />-->
          </a-input-search>
          <a-icon slot="extra"  v-show="!showSeachInput" style="font-size:18px" type="search" @click="showSearch" />
          <p  @click="selectWH(item.id)" :class=" selectId === item.id ?'cangku-list-item-selected':'cangku-list-item'" v-for="(item,index) in leftList">
            {{item.name}}
          </p>
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-card class="kuwei-list">
          <a-input-search placeholder="库位名称/前缀/货架号" style="width: 200px;margin-bottom: 20px" @search="onSearch" />

          <a-table
            :rowSelection="{type:'radio',selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
            v-if="dataSource.length>0"
            :loading="loading"
            :rowKey="(value,i)=>`${value.prefix}-${value.shelfNub}-${value.layersNub}-${value.positionNub}`"
            :columns="columns"
            :dataSource="dataSource"
          >
            <template slot="name" slot-scope="text, record">
              {{record.prefix}}-{{record.shelfNub}}-{{record.layersNub}}-{{record.positionNub}}

            </template>
            <span slot="action" slot-scope="text, record">
                  <a @click="moren(record)">设为默认</a>
                 </span>
          </a-table>
          <a-empty v-else></a-empty>
        </a-card>
      </a-col>
    </a-row>


  </a-modal>
</template>
<script>
import {getAction} from "@api/manage";

const columns = [
  {
    title: '库位名称',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '货架号',
    dataIndex: 'shelfNub',
  },
  {
    title: '层号',
    dataIndex: 'layersNub',

  },
  {
    title: '货位号',
    dataIndex: 'positionNub',

  },
    {
      title: '操作',
      key: 'action',
      scopedSlots: {customRender: 'action'},
    },
]
export default {
  data(){
    return{
      selectId:'',
      selectedRowKeys: [],
      selectedRows: [],
      searchValue:'',
      leftListCopy:[],
      showSeachInput:false,
      loading:false,
      id:'',
      leftList:[],
      columns,
      dataSourceCopy:[],
      dataSource:[],
      visible:false,
      url:{
        queryEneWarehouseLocation:'/ene/eneWarehouse/queryEneWarehouseLocation',
        list: "/ene/eneWarehouse/list?pageSize=999",
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectionRows;
    },
    handlePressEnter(){
      if(this.searchValue==""||this.searchValue==null){
        this.leftList=[...this.leftListCopy]
        this.showSeachInput=false
      }else{
        this.leftList=this.leftListCopy.filter(e=>{
          return e.name.indexOf(this.searchValue)!=-1
        })
      }
    },
    showSearch(){
      this.showSeachInput=true
    },
    onSearch(value){
      if(value==""||value==null){
        this.dataSource=[...this.dataSourceCopy]
      }else{
        this.dataSource=this.dataSourceCopy.filter(e=>{
          return value==e.prefix||value==e.shelfNub||value==`${e.prefix}-${e.shelfNub}-${e.layersNub}-${e.positionNub}`
        })
      }

    },
    selectWH(id){
      this.selectId=id
      this.getKuwei(id)

    },
    getKuwei(id){
      this.dataSource=[]
      this.dataSourceCopy=[]
      this.loading=true
      getAction(this.url.queryEneWarehouseLocation,{id:id}).then(res=>{
        if(res.success){
          this.dataSource=res.result
          this.dataSourceCopy=res.result
        }
      }).finally(()=>{
        this.loading=false
      })
    },
    handleCancel(){
      this.visible=false
    },
    handleOk(){
      this.visible=false
      this.$emit('back',this.selectedRows[0])
    },
    moren(record){

    },
    getData(){
      this.loading=true
      getAction(this.url.list).then(res=>{
        if(res.success){
          this.leftList=res.result.records
          this.leftListCopy=res.result.records
          if(this.leftList.length>0){
            this.selectId=res.result.records[0].id
            this.getKuwei(this.leftList[0].id)
          }
        }
      }).finally(()=>{
        this.loading=false
      })
    },
  }
}
</script>
<style lang="less" scoped>
.cangku{
  &-list{
    &-item{
      padding:8px 12px;
      cursor: pointer;
      background: transparent;
      &-selected{
        padding:8px 12px;
        cursor: pointer;
        background: #E6FAFF;
      }
      &:hover{
        background: rgba(230, 250, 255, 0.5);

      }
    }
   }
}
</style>